<template>
	<view class="yangsf-ratio-h-100 yangsf-ratio-w-100">
		<view class="yangsf-padding-20">
			<view class="" v-for="(item,index) in list" :key="index">
				<view class="yangsf-card">
					<u--text type="warning" :text="item.name"></u--text>
					<u--text size="12" type="info" :text="`创建时间：`+item.createTime"></u--text>
				</view>
			</view>
		</view>
		<view :style="{ position: 'absolute', left: iconLeft, top: iconTop }">
			<view class="yangsf-fab" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" @click="addItem">
				<!-- 悬浮按钮 -->
				<u-icon name="plus"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '名称',
					createTime: '2024-1-1 12:00:00'
				}],
				isDragging: false,
				buttonOffsetX: 0,
				buttonOffsetY: 0,
				iconLeft: '', // 初始横坐标位置
			    iconTop: '', // 初始纵坐标位置
				pageWidth: 0, // 页面宽度
				pageHeight: 0, // 页面高度
			}
		},
		onLoad() {
		    // 获取页面宽度和高度
		    uni.getSystemInfo({
		      success: (res) => {
		        this.pageWidth = res.windowWidth;
		        this.pageHeight = res.windowHeight;
		        // 设置初始位置为右下角
		        this.iconLeft = this.pageWidth - 100 + 'px'; // 40 为图标的宽度，可根据实际调整
		        this.iconTop = this.pageHeight - 200 + 'px'; // 40 为图标的高度，可根据实际调整
		      },
		    });
		},
		methods: {
			onTouchStart(event) {
				event.stopPropagation();
				this.isDragging = true;
				this.buttonOffsetX = event.touches[0].clientX - parseInt(this.iconLeft);
				this.buttonOffsetY = event.touches[0].clientY - parseInt(this.iconTop);
			},
			onTouchMove(event) {
				event.stopPropagation();
				if (this.isDragging) {
					const x = event.touches[0].clientX - this.buttonOffsetX;
					const y = event.touches[0].clientY - this.buttonOffsetY;
					// 限制在页面边界内
					const maxLeft = this.pageWidth - 40; // 40 为图标的宽度，可根据实际调整
					const maxTop = this.pageHeight - 40; // 40 为图标的高度，可根据实际调整
					this.iconLeft = x >= 0? (x <= maxLeft? x + 'px' : maxLeft + 'px') : '0px';
					this.iconTop = y >= 0? (y <= maxTop? y + 'px' : maxTop + 'px') : '0px';
				}
			},
			onTouchEnd(event) {
				event.stopPropagation();
				this.isDragging = false;
			},
			addItem(){
				
			}
		}
	}
</script>

<style scoped>
page {
  position: relative;
}

.yangsf-fab {
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 25px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	z-index: 999;
	font-size: 36px; /* 调整图标大小 */
	color: #4CAF50; /* 调整图标颜色 */
}
</style>
